<script setup>
import { watch, ref } from "vue";
import { storeToRefs } from "pinia";
import { useRoute } from "vue-router";
import { Tabbar, TabbarItem, Badge } from "vant";
import { useCart } from "./store/carts-num";
import { isLogined } from "./utils/auth";
const route = useRoute();
const isShowTabBar = ref(true);
const store = useCart();
const { cartCount } = storeToRefs(store);
// 监听是否需要隐藏底部导航
watch(route, (v) => {
  if (v.meta.needHideTabBar) {
    isShowTabBar.value = false;
  } else {
    isShowTabBar.value = true;
  }
});
if (isLogined()) {
  store.loadCart();
} else {
  store.resetCart();
}
</script>

<template>
  <router-view class="main"></router-view>
  <tabbar route :fixed="false" active-color="orangered" v-show="isShowTabBar">
    <tabbar-item :to="{ name: 'home' }" icon="home-o">首页</tabbar-item>
    <tabbar-item :to="{ name: 'list' }" icon="search">列表</tabbar-item>
    <tabbar-item :to="{ name: 'cart' }" icon="shopping-cart" :badge="cartCount"
      >购物车</tabbar-item
    >
    <tabbar-item :to="{ name: 'user' }" icon="user-o">我的</tabbar-item>
  </tabbar>
</template>

<style scoped>
.main {
  overflow: auto;
  flex: 1;
}
</style>
